<template>
    <view class="uni-shadow tem">
        <view class="u-flex u-row-between">
            <text class="font-bold">{{wageItem.name}}</text>
            <u-button class="uni-look-btn" type="warning" :plain="true" shape="circle" text="" @tap="detail">
                <text class="u-font-24">查看</text>
            </u-button>
        </view>
        <u-row class="u-m-t-10 u-flex u-flex-wrap">
            <u-col v-for="(item,index) in wageItem.list" :key="index" span="12" class="u-m-t-20 u-font-26 col">
                <text class="u-m-r-20 uni-dec-color">{{item.title}}</text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" size="14"/>
                <text v-else>{{item.value}}</text>
            </u-col>
        </u-row>
    </view>
</template>


<script>
export default {
    name:'wageMemberItem',
    props:{
        listItem:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
            wageItem:{
                name: '张三', // ryxm
                list:[
                    { filed:'zjhm', title:'身份证号', value:'513022202101011234' },
                    { filed:'sfje', title:'实发金额', value:'2000元' },
                    // id 发放明细id
                ]
            }
        }
    },

    created() {
        this.wageItem.name = this.listItem.ryxm
        this.wageItem.list.map((v,i)=>{
            v.value = this.listItem[v.filed]
        })
    },

    methods: {
        // 详情
        detail(){
            uni.navigateTo({
                url: '/pages/wage-bag/member-detail?ywbh='+this.listItem.id+'&id='+this.listItem.rybh
            })
        }
    },
}
</script>


<style scoped lang="scss">
    .tem{
        .col{
            flex-direction: row;
        }
    }
</style>